import {
  Button, Form, Input, notification,
} from 'antd'
import React, { PureComponent } from 'react'
import { testInfluxDBConnection } from '../api'

const { Item } = Form

export default class DataSource extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  componentDidMount() {
  }

  testStorageFn = () => {
    const {
      form, id, clearTable, isCheck, data,
    } = this.props
    form.current.validateFields().then(values => {
      this.setState({
        loading: true,
      })
      testInfluxDBConnection({
        apiToken: values.apiToken,
        server: values.server,
        dsType: values.dsType,
        id,
        dbName: values.dbName,
        orgName: values.orgName,
      }).then((res) => {
        if (res.status === 200) {
          clearTable()
          notification.success({
            message: '连接测试',
            description: res.msg,
          })
          this.setState({
            loading: false,
          })
        } else {
          clearTable()
          notification.error({
            message: '连接测试',
            description: res.msg,
          })
          this.setState({
            loading: false,
          })
        }
      })
    })
  }

  render() {
    const { isCheck, index, form } = this.props
    return (
      <div>
        {/* <Item
          label="数据源名称"
          name="dsName"
          rules={[{ required: true, message: '请输入数据源名称' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入数据源名称"
          />
        </Item>
        <Item
          label="数据源描述"
          name="dsDesc"
          rules={[{ required: false }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入数据源描述"
          />
        </Item> */}
        <Item
          label="组织名称"
          name="orgName"
          rules={[{ required: true, message: '请输入组织名称' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入组织名称"
          />
        </Item>
        <Item
          label="数据库"
          name="dbName"
          rules={[{ required: true, message: '请输入数据库' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入数据库"
          />
        </Item>
        <Item
          label="URL"
          name="server"
          rules={[{ required: true, message: '请输入URL' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入URL"
          />
        </Item>
        <Item
          label="apiToken"
          name="apiToken"
          rules={[{ required: true, message: '请输入apiToken' }]}
        >
          <Input.Password
            disabled={isCheck}
            placeholder="请输入apiToken"
          />
        </Item>
        <Item wrapperCol={{ offset: 6, span: 18 }}>
          <Button onClick={this.testStorageFn} loading={this.state.loading} type="primary">连接测试</Button>
        </Item>
      </div>
    )
  }
}
